<template>
  <view class="bar"></view>

  <view>
    <u-upload
        :fileList="fileList"
        @afterRead="afterRead"
        @delete="deletePic"
        name="1"
        multiple
        :maxCount="10"
    ></u-upload>
    <view style="height: 50rpx">

    </view>
    <u-textarea :autoHeight="true" border="bottom" v-model="comment" placeholder="展开说说说对商品的想法吧..."
                count></u-textarea>
    <view class="release-btn" @click="sendComment()">
      <image style="width: 50rpx;height: 50rpx" src="/static/images/release1.png"/>
      <text class="release-btn-text">发布</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {reqAddComment} from "@/api/comment";
import {onLoad} from "@dcloudio/uni-app";

const goodsId = ref(0);

onLoad((options: any) => {
  goodsId.value = options.id;
})

const sendComment = async () => {
  const images = fileList.value.length > 0 ? fileList.value.map((item: any) => item.url).join(',') : null;
  if (comment.value.trim().length > 0) {
    await reqAddComment({
      content: comment.value,
      goodsId: goodsId.value,
      images: images
    }).then((res: any) => {
      if (res.code == 200) {
        uni.showToast({
          title: '评论成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 700)
        fileList.value = [];
      }
    })
  } else {
    uni.showToast({
      title: '请输入评论内容',
      icon: 'none'
    })
  }
}
//评价
const comment = ref('');
//上传的图片集
const fileList = ref([])
// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList.value[fileListLen];
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      // url: 'http://192.168.1.43:1314/uploadFile', // 仅为示例，非真实的接口地址
      url: 'http://47.115.220.79:1314/uploadFile', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      success: (res) => {
        setTimeout(() => {
          const data = JSON.parse(res.data)
          if (data.code == 200) {
            resolve(data.fileUrl);
          }
        }, 1000);
      },
    });
  });
};
</script>


<style scoped lang="scss">
.release-btn {
  position: fixed;
  margin: 35rpx;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 50px;
  background-color: #FF9E29;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 50rpx;

  .release-btn-text {
    font-size: 40rpx;
    font-weight: 600;
    margin-left: 20rpx;
  }
}
</style>
